<template>
  <div class="index">
    <commonHeader></commonHeader>
    <div class="swiper-wrap">
      <swiper
        v-if="ListBanner1.length"
        :options="swiperOption"
        class="swiper-container swiper-container1"
        ref="mySwiper"
      >
        <swiper-slide
          class="swiper-item"
          v-for="(item, index) of ListBanner1"
          :key="index"
        >
          <img class="swiper-img" :src="item.banner" alt="" />
        </swiper-slide>
      </swiper>
      <div class="banner-text">
        <div class="en">HUI YUAN</div>
        <div class="cn">
          幸福
          <span>惠元</span>
        </div>
      </div>
    </div>
    <!-- <div class="banner" v-if="ListBanner1.length == 1">
      <img class="banner-img" :src="ListBanner1[0].banner" alt="" />
      <div class="banner-text">
        <div class="en">HUI YUAN</div>
        <div class="cn">
          幸福
          <span>惠元</span>
        </div>
      </div>
    </div> -->

    <!-- <div class="news-tab">
      <router-link class="item active" @click.native="$router.go(0)" to="/happiness#a0">幸福博物馆</router-link>
      <router-link class="item" @click.native="$router.go(0)" to="/happiness#a1">幸福留影机</router-link>
    </div> -->

    <div class="news-tab">
      <div class="item active" @click="anchor1('a0')">幸福博物馆</div>
      <div class="item" @click="anchor1('a1')">幸福留影机</div>
    </div>

    <div class="museum wow fadeInUp" id="a0" ref="a0">
      <div class="text">
        <div class="text-tit">幸福博物馆</div>
        <div class="text-con">
          我们已约定 <br />
          共渡风雨分享甜蜜 <br />
          让白云蓝天下的每一天 <br />
          都变成温暖的回忆 <br />
          <br />
          我要牵着你 <br />
          走过万紫千红的大地 <br />
          让梦想开花 <br />
          让你分外美丽 <br />
          <br />
          我们要一起幸福 <br />
          带着最好的自己前行 <br />
          追寻暖阳与曙光 <br />
          将每一份幸福 <br />
          细细珍藏
        </div>
      </div>
      <div class="vr">
        <img
          class="img"
          src="~@/assets/img/VR.jpg"
          alt=""
        />
        <div class="tit">VR全景</div>
      </div>
    </div>

    <div class="timeMachine wow fadeInUp" id="a1" ref="a1">
      <div class="timeMachine-tit">幸福留影机</div>
      <div class="news-tab2">
        <div
          :class="['item', { active: active1 == item.id }]"
          @click="cutNews(item.id)"
          v-for="(item, index) in videoTab"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>

      <!-- 视频文档 -->
      <!-- https://www.cnblogs.com/leokale-zz/p/12309354.html -->
      <!-- http://dplayer.js.org/zh/guide.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B -->
      <!-- https://blog.csdn.net/asing1elife/article/details/85990635 -->

      <div class="video-wrap">
        <div class="videos bangxin">
          <div class="video">
            <d-player
              ref="player"
              @play="play"
              @ended="end"
              @pause="pause"
              :options="options"
            ></d-player>
            <div class="pause" v-show="isplay" @click="playVideo()">
              <img class="img" src="~@/assets/img/pause.png" alt="" />
              <div class="text">观看影片</div>
            </div>
          </div>
          <img
            class="left-arrow"
            @click="prevVideoFun()"
            src="~@/assets/img/left-arrow.png"
            alt=""
          />
          <img
            class="right-arrow"
            @click="nextVideoFun()"
            src="~@/assets/img/right-arrow.png"
            alt=""
          />
        </div>
      </div>
    </div>

    <commonFooter></commonFooter>
  </div>
</template>

<script>
// ajax
import { AllBanner, AllContent, Classify, NewsList } from "@/assets/js/api";

import commonHeader from "@/components/header";
import commonFooter from "@/components/footer";
import { WOW } from "wowjs";
export default {
  name: "happiness",
  components: {
    commonHeader,
    commonFooter,
  },
  data() {
    const that = this;
    return {
      active: 0,
      active1: null,

      // 轮播图banner
      ListBanner1: [],

      videoTab: [],
      VideoList: [],
      // 当前的视频链下标
      index: 0,

      swiperOption: {
        // 参数选项,显示小点
        // pagination: ".swiper-pagination",
        paginationClickable: true,
        //循环
        loop: true,
        //每张播放时长3秒，自动播放
        autoplay: 2000,
        // 用户操作swiper之后，是否禁止autoplay
        autoplayDisableOnInteraction: false,
        //滑动速度
        speed: 1000,
        // delay:1000
        // prevButton: ".swiper-button-prev",
        // nextButton: ".swiper-button-next",

        onSlideChangeStart: function (swiper) {
          // that.active = swiper.realIndex;
          //   this.realIndex + 1
        },
      },

      // 视频参数
      options: {
        theme: "#b09c6e", // 风格颜色，例如播放条，音量条的颜色
        // 自动预加载
        preload: "auto",
        video: {
          // https://www.runoob.com/try/demo_source/movie.mp4
          // url: 'http://img.manro.com.cn/jb-play.mp4',
          pic:
            "https://img02.mockplus.cn/preview/2020-09-22/6fb2aab5-c810-4da1-9e27-dfaf0d632c7c/images/%E9%A6%96%E9%A1%B5/u6.png",
          type: "auto",
        },
      },
      isplay: true,
    };
  },

  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    player1() {
      return this.$refs.player.dp;
    },
  },

  methods: {
    cutNews(index) {
      this.active1 = index;
      this.VideoListFun(this.active1);
      this.isplay = true;
      this.index = 0;
    },

    // 视频列表
    VideoListFun(id) {
      let parameter1 = {
        typename: "幸福惠元-幸福留影机",
        sort: 1,
        id: id,
      };
      AllContent(parameter1).then((response) => {
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            this.VideoList = data;
            this.player1.switchVideo({
              url: this.VideoList[this.index].videos,
              pic: "",
            });
          }
        }
      });
    },

    // 监听视频播放
    play() {
      this.isplay = false;
    },
    // 监听视频结束
    end() {
      this.isplay = true;
    },
    // 监听视频暂停
    pause() {
      this.isplay = true;
    },

    playVideo() {
      this.player1.play();
    },

    
    // 点击上一步
    prevVideoFun() {
      this.isplay = true;
      if (this.index == 0) {
        this.index = this.VideoList.length - 1;
        // return;
      } else {
        --this.index;
      }
      this.player1.switchVideo({
        url: this.VideoList[this.index].videos,
        pic: "",
      });
    },

    // 点击下一步
    nextVideoFun() {
      this.isplay = true;
      if (this.index == this.VideoList.length - 1) {
        this.index = 0;
        // return;
      } else {
        ++this.index;
      }
      this.player1.switchVideo({
        url: this.VideoList[this.index].videos,
        pic: "",
      });
    },

    // 跳转锚点
    goAnchor(selector) {
      let anchor = this.$el.querySelector(selector);
      if (anchor) {
        console.log(selector, "selector");
        document.documentElement.scrollTop = anchor.offsetTop;
      }
    },
    // wow动画
    wowFun() {
      var wow = new WOW({
        // 距离可视区域多少开始执行动画
        offset: 200,
        // 异步加载的内容是否有效
        live: true,
      });
      wow.init();
    },
    anchor1(index) {
      document.documentElement.scrollTop = this.$refs[index].offsetTop;
    },
  },
  created() {},
  mounted() {
    let parameter1 = {
      bannerposition: 14,
      // typename: "实力惠元-医生管理-医生说明",
    };
    // banner
    AllBanner(parameter1).then((response) => {
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          var data = response.data.Data;
          this.ListBanner1 = data;
          this.$nextTick(() => {
            if (this.ListBanner1.length <= 1) {
              this.swiper.stopAutoplay();
              this.swiper.lockSwipes();
            }
            this.wowFun();
            this.goAnchor(this.$route.hash);
          });
        }
      }
    });

    // 视频tab标题
    Classify({ type: 3 }).then((response) => {
      if (response.data.ReturnCode == 0) {
        if (response.data.Data) {
          var data = response.data.Data;
          this.videoTab = data;
          this.active1 = this.videoTab[0].id;
          this.VideoListFun(this.active1);
          this.$nextTick(() => {
            this.wowFun();
            this.goAnchor(this.$route.hash);
          });
        }
      }
    });
  },

  // watch: {
  //   // 刷新页面
  //   $route(to, from) {
  //     this.$router.go(0)
  //   }
  // }
};
</script>


<style lang="scss" scoped>
@import "~@/assets/scss/happiness.scss";
</style>